<template>
	<view class="">
		<view class="u-padding-20">
			<u-form :model="form" ref="uForm" label-width="160">
				<u-form-item label="工作地址" prop="address" @click="openMap">
					<u-input @click="openMap" v-model="form.address" type="select" placeholder="点击选择地址" disabled />
				</u-form-item>
				<u-form-item label="工作种类" prop="work_name" @click="sortshow=true">
					<u-input @click="sortshow=true" v-model="form.work_name" type="select" disabled
						placeholder="点击选择工作种类" />
				</u-form-item>
				<u-form-item label="标题" prop="title">
					<u-input v-model="form.title" placeholder="请输入标题" />
				</u-form-item>
				<u-form-item label="联系人" prop="contacts">
					<u-input v-model="form.contacts" placeholder="请输入联系人" />
				</u-form-item>
				<u-form-item label="联系号码" prop="phone">
					<u-input v-model="form.phone" type="Number" placeholder="请输入联系号码" />
				</u-form-item>
				<u-form-item label="是否置顶">
					<view class="u-flex u-row-between">
						<view>
							<u-radio-group v-model="form.top">
								<u-radio v-for="(item, index) in sexList" :key="index" :name="item.value">
									{{ item.name }}
								</u-radio>
							</u-radio-group>
						</view>
						<view class="u-type-warning">置顶将要消耗积分</view>
					</view>
					
				</u-form-item>
				<u-form-item label="工作内容" label-position="top">
					<u-input :customStyle="{background:'#f7f7f7',padding:'20rpx'}" v-model="form.content"
						type="textarea" placeholder="请输入工作内容" />
				</u-form-item>

			</u-form>
		</view>

		<view style="width: 90%;margin: 40rpx auto;">
			<u-button @click="submit" type="primary" shape="circle">提交</u-button>
		</view>


		<u-select child-name="child" value-name="id" label-name="workName" v-model="sortshow" mode="mutil-column-auto"
			:list="sortList" @confirm="sortConfirm"></u-select>

		<u-picker :params='{
	province: true,
	city: true,
	area: false
}' mode="region" @confirm="sureRegin" v-model="regionshow"></u-picker>
		<u-toast ref="uToast" />


	</view>
</template>

<script>
	import wxpay from '@/common/wxpay.js';
	export default {
		data() {
			return {

				sexList: [{
					name: '是',
					value: 1,


				}, {
					name: '否',
					value: 0,

				}],
				sortshow: false,
				sortList: [],
				regionshow: false,
				form: {
					contacts: '',
					phone: "",
					contacts: '',
					content: '',
					province: '',
					city: '',
					address: '',
					work_name: '',
					work_id: '',
					top: 1,
					title: '',
					type:''
				},
				rules: {
					
					work_name:[{
						required: true,
						message: '请选择工作种类',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					
					address:[{
						required: true,
						message: '请输入工作地址',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					work_name:[{
						required: true,
						message: '请输入工作种类',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					title: [{
						required: true,
						message: '请输入标题',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					name: [{

						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],

					contacts: [{
						required: true,
						message: '请输入联系人',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],


					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				}
			};
		},
		onLoad(options) {
			if(options.title){
				uni.setNavigationBarTitle({
					title:options.title
				})
				this.form.type=options.title=='发布工作'?2:1;
			}
			this.getsortList()
		},
		methods: {
			
			sortConfirm(e) {
				let label = e[1].label;
				let value = e[1].value;
				this.form.work_id = value;
				this.form.work_name = label;
				console.log(e)
			},
			getsortList() {
				this.$u.post('/index/work', {}).then(res => {
					this.sortList = res;
				}).catch(err => {

				})
			},
			sureRegin(e) {
				let province = e.province.label;
				let city = e.city.label;
				if(city=='市辖区'){
					this.form.city = province;
					this.form.province = '';
					this.form.address = province + city;
				}else{
					this.form.city = city;
					this.form.province = province;
					this.form.address = province + city;
				}
			},
			openMap(e) {
				this.regionshow = true;
			},
			submit() {

				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.post('/user/publish', this.form).then(res => {
							this.$refs.uToast.show({
								title: '发布成功',
								type: 'success',
								back: true
							})
						}).catch(err => {
                              setTimeout(()=>{
                              	uni.navigateTo({
                              		url:'/pages/myIntegral/recharge'
                              	})
                              },1500)
                              
                              return
                              							
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>


<style scoped>

</style>
